<!DOCTYPE html>
<html>
<head>
    <title>Flow Game</title>
    <script type="text/javascript" src="crafty.js"></script>
    <style>
        body, html { margin:0; padding: 0; overflow:hidden; font-family:Arial; font-size:20px }
        #cr-stage {
            border:2px solid black;
            margin:5px auto;
            color:white;
            border-radius: 5px;
            /* IE10 Consumer Preview */
            background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #24FF2B 0%, #EFD467 100%);

            /* Mozilla Firefox */
            background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #24FF2B 0%, #EFD467 100%);

            /* Opera */
            background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #24FF2B 0%, #EFD467 100%);

            /* Webkit (Safari/Chrome 10) */
            background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 561, color-stop(0, #24FF2B), color-stop(1, #EFD467));

            /* Webkit (Chrome 11+) */
            background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #24FF2B 0%, #EFD467 100%);

            /* W3C Markup, IE10 Release Preview */
            background-image: radial-gradient(ellipse farthest-corner at center bottom, #24FF2B 0%, #EFD467 100%);

        }
    </style>
    <script type="text/javascript">
        const BACK = 1,NEXT = 2, RESET = 3, PRE = 4;
        // Hang so chi kieu cua InGameBut
        /**
         *  Object chua vi tri
         * @param i
         * @param j
         */

        function position(i,j){
            this.x = i;
            this.y = j;
            this.tran = i*cellN + j;
        }
        var colorSet = new Array(
                "null",
                "#0000ff",
                "#ff0000",
                "#00ffff",
                "#ff7f00",
                "#ff00ff",
                "#eeee00",
                "#008000",
                "#a52a2a"
        );

        var roadColorSet = new Array(
                "null",
                "#383872",
                "#723838",
                "#387272",
                "#725538",
                "#723877",
                "#6e6e38",
                "#385538",
                "#5e4242"
        );


        /*var hasRoad = new Array(); //Quan ly xem mot cap diem co Road hay chua
        for(i=1;i<9;i++){
            hasRoad[i]=0; //khoi tao
        }*/
        var isClick = false;
        var currentColor;
        /**
         * Doi tuong chua paths cua moi Points
         * Chua cac cells trong path va
         * la doi tuong khoi tao va destroy() Road  ->>> Road phai viet lai
         */
        function flow(){
            this.arr = new Array(); //Chua vi tri cac cell
            this.roads = new Array();// chua Road
            // truoc khi add position, cell phai duoc cap nhat cell.cC truoc

            this.isHas = function(position){
                for(var i=0;i<this.arr.length;i++){
                    var temp = this.arr[i];
                    if(temp.x == position.x && temp.y== position.y){
                        return true;
                    }
                }
                return false;
            }
            this.add = function(position){
                if(this.isHas(position)) return;
                this.arr.push(position);
                map[tran(position)].isRoad = true;
                map[tran(position)].color(roadColorSet[map[tran(position)].cC]);
                if(this.arr.length>=2){
                    var temp_n = this.arr.length;
                    this.roads[this.arr.length-2] = Crafty.e("DOM, 2D, Road")
                            .road(this.arr[temp_n-1],this.arr[temp_n - 2],map[tran(position)].cC);
                    if(this.roads[this.arr.length - 2] == null){
                        this.roads.length = this.roads.length - 1;
                        isClick = false;
                        this.arr.pop();
                        map[tran(position)].color("#e0bd44");
                        map[tran(position)].isRoad = false;
                        if(this.arr.length==1) this.clearAll();
                        /**
                         * Truong hop khong tao duoc road;
                         */
                    }
                    return this;
                }
            }

            this.clearAll = function(){
                for(var i=0;i<this.roads.length;i++){
                    this.roads[i].destroy();
                }

                this.roads.length = 0;
                for(var i=0;i<this.arr.length;i++){
                    map[tran(this.arr[i])].isRoad = false;

                    map[tran(this.arr[i])].color("#e0bd44");
                }
                this.arr.length = 0;
            }

            this.clearFromIn = function(position){
                for(var i=0;i<this.arr.length;i++){
                    var temp = this.arr[i];
                    if(temp.x == position.x && temp.y== position.y){
                        break;
                    }
                }
                if(i==1){
                    this.clearAll();
                    return;
                }
                for(var j=i;j<this.arr.length;j++){
                    map[tran(this.arr[j])].isRoad = false;
                    map[tran(this.arr[j])].color("#e0bd44");
                }
                for(var j=i-1; j<this.roads.length ; j++){
                    this.roads[j].destroy();
                }

                this.roads.length = i-1;
                this.arr.length = i;
            }

            this.clearFrom = function(position){
                for(var i=0;i<this.arr.length;i++){
                    var temp = this.arr[i];
                    if(temp.x == position.x && temp.y== position.y){
                        break;
                    }
                }
                for(var j=i+1;j<this.arr.length;j++){
                    map[tran(this.arr[j])].isRoad = false;
                    map[tran(this.arr[j])].color("#e0bd44");
                }
                for(var j=i; j<this.roads.length ; j++){
                    this.roads[j].destroy();
                }

                this.roads.length = i;
                this.arr.length = i+1;
            }
        }

        /**
         * Quan ly Cac Cell trong mot path
         * Cell duoc luu boi cặp số i,j
         * Mot Cell chi duoc nam trong mot Path
         * khi no nam trong Path thì Cell.isRoad = true
         * @type {Array}
         */
        var Path = new Array();
        for(var i=0;i<colorSet.length;i++){
            Path[i] = new flow();

        }
        resetPath = function(){
            for(var i=0;i<Path.length;i++){
                Path[i].clearAll();
            }
        }


        var pointMap = new Array();
        /**
         * Quản lý vị trí ban đầu của các Point
         * Dùng để khởi tạo và lưu lại map
         */

        pointMapSets = new Array();



        pointMaps8 = new Array();
        pointMaps8[0]=[1,0,0,6,0,0,0,0,0,0,0,6,7,7,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,5,0,0,0,0,2,0,0,0,0,0,5,0,1,0,4,0,0,0,0,0,0,2,3,0,0,3,4];
        pointMaps8[1]=[1,0,0,0,0,0,2,0,0,0,3,0,0,0,3,0,0,0,0,0,0,4,0,0,0,0,0,4,0,0,0,0,0,5,0,0,0,0,6,0,0,1,0,7,8,0,0,0,0,0,7,8,0,0,0,0,5,0,0,0,0,0,6,2];
        pointMaps8[2]=[1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,5,5,4,0,0,0,0,3,6,7,3,0,0,0,0,0,6,7,0,0,0,0,2,0,0,0,0,2,0,0,0,0,0,0,0,0,0];
        pointMaps8[3]=[1,0,0,6,0,0,0,7,0,0,0,0,7,8,0,8,0,0,0,0,0,6,5,0,0,0,0,4,5,0,0,0,0,0,0,0,0,0,0,4,0,0,2,3,0,0,0,0,0,0,0,0,0,2,1,0,0,0,0,0,0,0,0,3];
        pointMaps8[4]=[1,0,0,5,0,0,0,0,0,0,0,6,0,0,8,0,0,2,0,0,0,0,0,0,0,1,0,0,0,8,0,0,0,0,2,0,0,7,7,5,3,0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,0,4,3,6,0,0,0,0];
        pointMaps8[5]=[2,0,4,0,0,0,0,0,1,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,1,0,0,0,4,6,0,0,0,0,0,0,5,0,7,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,2,3,3,0,0,5,8,0];
        pointMaps8[6]=[1,2,3,4,5,6,7,8,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,4,0,0,0,0,0,3,0,0,5,2,6,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0];
        pointMaps8[7]=[1,3,4,6,0,0,6,7,0,0,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,7,0,0,0,0,1,0,0,5,2,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0];
        pointMaps8[8]=[0,0,1,2,0,0,0,0,0,2,3,4,5,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,7,6,0,0,0,0,0,4,0,8,0,0,0,0,0,3,8,5,0,0,1,0,0,0,0,0,0,0];
        pointMaps8[9]=[4,0,0,0,0,0,3,2,4,0,0,0,3,0,0,0,2,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,5,0,0,0,0,0,0,1,6,0,0,0,0,0,0,5,7,0,0,0,0,0,0,6,8,0,0,8,0,0,0,7];
        pointMaps8[10]=[8,0,0,8,7,0,0,0,0,0,0,3,2,0,7,0,0,2,1,0,0,0,6,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,0,0,0,3,4,5,0,0,0,4,0,0,0,5,0,0,0];
        pointMaps8[11]=[1,2,3,4,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,8,8,7,6,5,1,2,3];
        pointMaps8[12]=[1,0,0,4,5,0,0,6,0,0,0,0,0,0,7,0,0,4,0,0,0,0,0,0,0,1,0,2,0,0,0,0,0,0,0,3,0,0,8,7,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,0,2,0,0,0,3,5,0,8];
        pointMaps8[13]=[7,0,0,7,0,8,0,8,0,6,0,0,0,4,0,0,0,0,0,0,0,0,3,0,6,0,0,0,0,0,0,0,5,0,0,0,1,2,0,0,0,0,2,0,0,1,0,0,0,4,3,0,0,0,0,0,5,0,0,0,0,0,0,0];
        pointMaps8[14]=[0,0,3,0,0,0,0,8,0,0,0,0,0,8,7,0,0,0,0,7,0,0,0,0,1,0,0,4,0,0,0,0,0,0,0,3,6,0,6,0,0,1,0,0,0,0,5,0,2,0,0,0,0,0,0,0,2,0,0,0,5,4,0,0];
        pointMaps8[15]=[1,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,6,6,8,0,0,8,0,0,0,0,0,0,4,0,0,0,0,0,4,3,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,1,2,0,3];
        pointMaps8[16]=[1,0,0,0,0,7,0,0,0,0,0,0,0,7,0,0,0,2,0,0,0,6,0,0,0,1,0,0,0,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,5,0,0,0,0,3,0,4,0,0,0,0,0,2,3,4,0,0];
        pointMaps8[17]=[1,0,0,0,0,0,0,0,0,0,0,0,3,2,1,0,0,0,0,0,3,0,0,0,4,0,0,0,0,2,0,0,4,0,0,0,0,6,7,0,5,0,0,5,6,0,0,0,0,0,0,0,0,0,7,8,0,0,0,0,0,0,8,0];


        pointMapSets[8] = pointMaps8;

       // pointMaps.length = 0;
        var pointMaps2 = new Array();
        pointMaps2[0]=[1,0,0,5,6,6,0,0,0,0,0,0,0,2,0,5,0,0,0,1,0,0,0,4,0,0,0,4,3,0,0,0,2,3,0,0];
        pointMaps2[1]=[1,2,3,7,0,7,0,0,0,0,0,6,0,0,0,6,5,0,0,2,0,5,0,0,0,1,0,4,0,0,0,0,0,3,4,0];
        pointMaps2[2]=[1,6,0,0,0,0,0,0,0,5,6,0,0,0,0,0,5,4,0,4,0,0,0,0,0,0,0,0,3,0,1,0,2,2,3,0];
        pointMaps2[3]=[1,0,0,6,0,6,0,0,0,0,0,5,0,2,0,5,4,0,0,1,0,4,0,0,0,0,2,3,0,0,0,0,3,0,0,0];
        pointMaps2[4]=[2,0,0,0,0,0,1,0,0,0,0,0,6,5,4,0,0,0,6,0,7,0,1,0,5,0,0,0,3,2,0,0,7,4,0,3];

        pointMapSets[6] = pointMaps2;

        //pointMaps.length = 0;
        var pointMaps1 = new Array();

        pointMaps1[0]=[1,0,0,0,4,5,0,0,0,0,0,0,0,0,0,0,8,6,0,0,0,4,0,0,0,8,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,2,0,0,0,0,3,7,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,5];
        pointMaps1[1]=[1,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,7,8,0,0,0,0,0,7,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,0,4,4,5,0,0,0,0,0,5,0,0,0,1,3,0,0,0,0,0,0,0,2,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        pointMaps1[2]=[0,0,0,0,0,0,7,7,0,6,0,8,0,0,0,0,8,0,0,1,0,0,0,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,5,0,0,0,0,0,0,0,0,0,4,4,3,2];
        pointMaps1[3]=[1,0,0,3,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,5,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,2,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,4,0,0,0,0,0,7,0,0,6,0,1,0,0,7,0,0,0,0,0,0,0,0,2,6,0,0,0,0,0,0];
        pointMaps1[4]=[4,0,5,6,7,0,0,0,0,0,1,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,6,5,0,0,0,4,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,1,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0];
        pointMaps1[5]=[1,5,0,5,6,7,0,0,0,7,0,4,0,0,0,0,0,0,0,6,0,0,0,0,0,0,0,0,0,0,0,0,3,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        pointMaps1[6]=[1,7,0,0,0,0,0,0,7,5,0,0,8,0,0,0,0,6,0,0,0,8,0,0,1,4,0,0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,2,0,0,0,0,0,0,3,6,0,0,0,0,0,0,0,0,0,0,0];


        pointMapSets[10]=pointMaps1;

        //pointMaps.length=0;
        mapSelect = 0
        //pointMaps = pointMapSets[8];
        //pointMap = pointMaps[mapSelect];
        /*for(i=0;i<cellN*cellN;i++){
            pointMap[i] = 0;

        }
        for(i=1;i<cellN;i++){
            while(1){
                t= Crafty.math.randomInt(0,cellN*cellN-1);
                if(!pointMap[t]) break;
            }
            pointMap[t] = i;

            while(1){
                t= Crafty.math.randomInt(0,cellN*cellN-1);
                if(!pointMap[t]) break;
            }
            pointMap[t] = i;

        }*/
        /**
         * Mang cac  Cell, Mang 1 chieu
         * @type {Array}
         */
        var map = new Array();
        checkGameEnd = function(){
            for(var i = 0;i<cellN*cellN;i++){
                if( !(map[i].isPoint) && !(map[i].isRoad) ){
                    return false
                }
                if(pointMap[i]){
                    var a = Math.floor(i/cellN);
                    var b = i - a*cellN;
                    if(! (Path[map[i].cC].isHas(new position(a,b)))){
                        return false;
                    }
                }
            }
            return true;
        }

        function tran(myPos){
            return (myPos.x*cellN + myPos.y);
        }
        Crafty.c("Cell",{
            /** Khoi tao cell, cell hoặc trống hoặc chứa Road hoặc Point
             *  Cell sẽ đổi mầu nếu trống và MouseOver (khong can trong)
             *  Cell sẽ đổi màu Road element nếu MouseOver && isClick && !isPoint
             *      màu Road sẽ đổi theo màu Point bắt đầu
             *
             */
            myPos: new position(0,0),
            isRoad: false,
            isPoint: false,
            isConnected: false,
            road: undefined, //Path element
            P: 0, //Point element
            cC: 0, //Cell Color
            init: function(){
                this.requires("Color");
                this.color("#e0bd44");

                this.requires("Mouse")
                        .bind("MouseOver",this._mouseover)
                        .bind("MouseOut",this._mouseout)
                        .bind("MouseDown",this._mouseDown)
                        .bind("MouseUp",this._mouseUp);

            },
            _mouseDown: function(){
                if(this.isPoint || this.isRoad){
                    if(this.isPoint){
                        if(Path[this.cC].arr.length)
                        {
                            Path[this.cC].clearAll();

                        }
                    }
                    if(this.isRoad){
                        Path[this.cC].clearFrom(this.myPos);
                        //this.isRoad = true;
                    }

                    Path[this.cC].add(this.myPos);
                    isClick = true;
                    currentColor = this.cC;
                }

            },
            _mouseover: function(){

                this.color("#ffe793");
                if(isClick){
                    if(!this.isPoint){
                        /**
                         * neu mouse over Point thi ko lam gi ca
                         */
                        if(this.isRoad){
                            if(this.cC == currentColor){
                                Path[this.cC].clearFrom(this.myPos);
                            }else{
                                Path[this.cC].clearFromIn(this.myPos);
                            }
                            /**
                             * Neu mouseover 1 road
                             */
                        }

                        this.cC = currentColor;
                        this.isRoad = true;
                        Path[this.cC].add(this.myPos);
                    }else{
                        if(this.cC==currentColor){
                            Path[this.cC].add(this.myPos);
                            isClick = false;
                            if(checkGameEnd()){
                                Crafty.e("DOM, 2D, Image,Mouse").image("ccc.png")
                                        .attr({x: baseX + Math.floor( (cellSize*cellN - 274)/2 ),y: baseY + Math.floor((cellSize*cellN - 110)/2 )})
                                        .bind("MouseDown",function(){
                                            if(mapSelect <pointMaps.length-1 ){
                                                mapSelect++;
                                            }else{
                                                return;
                                            }
                                            resetPath();
                                            pointMap = pointMaps[mapSelect];
                                            Crafty.scene("Play");
                                        });

                            }
                        }
                    }

                }
            },
            _mouseout: function(){
                if(this.isRoad)
                this.color(roadColorSet[this.cC]);
                else{
                    this.color("#e0bd44");
                }

            },

            _mouseUp: function(){
                isClick = false;
                currentColor = 0;
                if(this.isPoint && (Path[this.cC].arr.length == 1)){
                    Path[this.cC].clearAll();
                }
            },


            cell: function(myPos){

                this.myPos = myPos;
                if(pointMap[tran(this.myPos)]){
                    this.P = Crafty.e("DOM,2D,Color,Point")
                            .point(this.myPos);
                    this.isPoint = true;
                    this.cC = pointMap[tran(this.myPos)];

                }
                //this.areaMap([this.x,this.y], [this.x+cellSize,this.y], [this.x+cellSize,this.y+cellSize], [this.x,this.y+cellSize]);
                return this;
            }
        });
        Crafty.c("Point",{
            /**
             *  Tạo điểm đầu và điểm cuối
             *  Mỗi màu có một cặp điểm đầu và cuối
             *  Khi MouseDown trên point: isClick*=-1 gán currentColor=Point.Color hoặc hủy nếu !isClick
             *
             *  Point and It's Road được quản lý bởi bảng Path[]
             *  Nếu một Point đã có path && Click -> tất cả Road của nó bị hủy
             */
            myPos: new position(0,0),
            pC: 0, //point Color
            init: function(){
                this.requires("Color")
                        .attr({w: cellSize - Math.floor(cellSize*3/8),h: cellSize - Math.floor(cellSize*3/8)});
                this.css("border-radius",Math.round(cellSize*5/16)+"px");
            },
            point: function(myPos){
                this.attr({x: i*cellSize+Math.round(cellSize*3/16) + baseX,y: j*cellSize+Math.round(cellSize*3/16) + baseY });
                this.myPos = myPos;
                if(pointMap[tran(this.myPos)]) {
                    this.color(colorSet[pointMap[tran(this.myPos)]]);
                    this.pC = pointMap[tran(this.myPos)];
                    //Path[this.pC].push({i: i, j: j});
                }
                return this;
            },
            pointColor: function(i){

            }

        });
        /**
         * Road la mot div noi 2 Cell
         * dau vao la 2 position
         * quan ly boi flow( tao va xoa)
         */


        Crafty.c("Road", {
            rC: 0, //Road Color
           // myPos: new position(0,0),
            /**
             * Khởi tạo Road
             * Road là một element của Cell, truy cập lại cell qua mảng map[]
             * Khởi tạo khi mouseOver  && isClick
             * Màu Road.Color = currentColor
             *
             */
            init: function(){
                this.requires("Color")
                        .css("border-radius",(Math.round(cellSize*3/16))+"px");
            },
            road: function(pos1,pos2,co){
                //this.myPos = myPos;
                this.rC = co;

                this.color(colorSet[this.rC]);

                temp_x = pos1.x - pos2.x;
                temp_y = pos1.y - pos2.y;

                if((temp_x*temp_y)==0){
                    if(temp_x){
                        if(temp_x==-1){
                            this.attr({x: baseX +  pos1.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos1.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*11/8), h: Math.floor(cellSize*3/8)});
                        }else if(temp_x==1){
                            this.attr({x: baseX + pos2.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos2.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*11/8), h: Math.floor(cellSize*3/8)});
                        }else{
                            return null;
                        }
                    }else{
                        if(temp_y==-1){
                            this.attr({x: baseX + pos1.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos1.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*3/8), h: Math.floor(cellSize*11/8) });
                        }else if(temp_y==1){
                            this.attr({x: baseX + pos2.x*cellSize + Math.round(cellSize*5/16), y: baseY + pos2.y*cellSize + Math.round(cellSize*5/16), w: Math.floor(cellSize*3/8), h: Math.floor(cellSize*11/8) });
                        }else{
                            return null;
                        }
                    }
                }else{
                    return null;
                }

                return this;


                //Path[this.rC].push({i: this.row,j: this.col});
            },
            des : function(){

                this.destroy();
            }
        });


        var flowH,flowW,cellN,baseX,baseY,cellSize,isWitdhMode;




        window.onload = function(){

            Crafty.init();


            flowH = Crafty.DOM.window.height;
            flowW = Crafty.DOM.window.width;

            Crafty.scene("menu",function(){
                Crafty.c("MyButton",{
                    text: undefined,
                    n: 8,
                    init: function (){
                        this.requires("Color")
                                .color("SandyBrown");
                        this.requires("CSS");
                        this.requires("Mouse")
                                .bind("MouseOver",this._mouserOver)
                                .bind("MouseOut",this._mouseOut)
                                .bind("MouseDown",this.mouseDown);
                    },
                    mouseDown: function(){
                        cellN = this.n;
                        //pointMaps.length=0;

                        if(this.n!=0){
                            pointMaps = pointMapSets[this.n];
                            mapSelect = 0;
                            pointMap = pointMaps[mapSelect];
                            Crafty.scene("Play");
                        }
                    },
                    _mouserOver: function(){
                        this.color("aqua");
                        //this.css("background-image","-webkit-radial-gradient(center, ellipse farthest-side, #DA91FF 0%, #4163EF 100%)");
                    },
                    _mouseOut: function(){
                        this.color("SandyBrown");
                    },

                    button: function(text,thutu,n){
                        this.n = n;
                        this.text = text;
                        this.attr({x: Math.floor((flowW*1/5)), y: Math.floor(flowH*(thutu+1)/8),w: Math.floor(flowW/2), h: Math.floor(flowH/9) })
                                .css("border-radius",(Math.floor(this.h/3))+"px");
                        //.css("background-image","-webkit-radial-gradient(right center, ellipse farthest-side, #FFF56E 0%, #EFAC26 100%)");
                        Crafty.e("DOM,2D, Text").text(text)
                                .attr({x: this.x + Math.floor(this.w/4), y: this.y + Math.floor((this.h-20)/2),
                                    w: Math.floor(this.w*4/5),h: this.h});
                        return this;
                    }
                });
                //Crafty.e("Backgroud, DOM, 2D, Image").image("menu.jpg","no-repeat")
                  //      .attr({w: flowW, h: flowH});
                //Crafty.e("ChoseMode, DOM, 2D,MyButton").button("Chose Mode",4,0);
                Crafty.e("6x6,2D, DOM, MyButton").button("Play 6x6 Boards",1,6);

                Crafty.e("8x8,2D, DOM, MyButton").button("Play 8x8 Boards",2,8);
                Crafty.e("10x10,2D, DOM, MyButton").button("Play 10x10 Boards",3,10);
                //Crafty.scene("play");
            });


            Crafty.scene("Play",function(){

                Crafty.c("InGameBut",{
                    MYBACK: 0,
                    MYRELOAD: 1,
                    MYNEXT:2,
                    type: 0,
                    init: function(){
                        this.requires("Color")
                                .css("border-radius",Math.floor(cellSize/4)+"px")
                                .color("Green");
                        this.requires("Mouse")
                                .bind("MouseOver",this._mouserOver)
                                .bind("MouseOut",this._mouseOut)
                                .bind("MouseDown",this.mouseDown);

                    },
                    text: undefined,
                    inGameBut : function(text,type){
                        this.text = text;
                        this.type = type;
                        if(isWitdhMode){
                            this.attr({
                                w: cellSize*2,
                                h: cellSize,
                                x: cellN*cellSize + baseX,
                                y: type*cellSize + baseY
                            });

                        }else{
                            this.attr({
                                w: cellSize*2,
                                h: cellSize,
                                x: type*cellSize + baseX,
                                y: cellN*cellSize + baseY

                            });
                        }

                    },
                    mouseDown: function(){
                        switch(this.type){
                            case NEXT:
                                    if(mapSelect <pointMaps.length-1 ){
                                        mapSelect++;
                                    }
                                    pointMap = pointMaps[mapSelect];
                                    resetPath();
                                    Crafty.scene("Play");
                                break;
                            case RESET:
                                    resetPath();
                                Crafty.scene("Play");
                                break;
                            case BACK:
                                mapSelect = 0;
                                Crafty.scene("menu");
                                break;
                            case PRE:
                                if(mapSelect){
                                    mapSelect--;
                                }
                                resetPath();
                                pointMap = pointMaps[mapSelect];
                                Crafty.scene("Play");
                                break;
                        }
                    },
                    _mouserOver: function(){
                        this.color("SandyBrown");
                        //this.css("background-image","-webkit-radial-gradient(center, ellipse farthest-side, #DA91FF 0%, #4163EF 100%)");
                    },
                    _mouseOut: function(){
                        this.color("Green");
                    }
                });

                //Crafty.background('rgb(127,127,127)');
                var tempx = Math.floor(flowW/cellN);
                var tempy = Math.floor(flowH/cellN)
                cellSize = Math.min(tempx, tempy);
                if(tempx<tempy) isWitdhMode = false;
                else isWitdhMode = true;
                if(isWitdhMode){
                    baseX = Math.round( (flowW-cellN*cellSize)/8 );
                    baseY = Math.round( (flowH-cellN*cellSize) / 2 );
                }else{
                    baseX = Math.round( (flowW-cellN*cellSize)/2 );
                    baseY = Math.round( (flowH-cellN*cellSize) / 8 );
                }
                for(i=0;i<cellN;i++){
                    for(j=0;j<cellN;j++){
                        posi = new position(i,j);
                        map[posi.tran]=Crafty.e("DOM,2D,Cell,Cell"+i+" "+j)
                                .attr({x: baseX + i*cellSize, y: baseY + j*cellSize,w: cellSize-1,h: cellSize-1})
                                .cell(posi);

                    }
                }
                Crafty.e("DOM,2D,InGameBut").inGameBut("text",BACK);
                Crafty.e("DOM,2D,InGameBut").inGameBut("text",RESET);
                Crafty.e("DOM,2D,InGameBut").inGameBut("text",NEXT);
                Crafty.e("DOM,2D,InGameBut").inGameBut("text",PRE);
            });

            Crafty.scene("menu");

            //Crafty.e("DOM,2D,Point").point(3,4).pointColor(5);

        }




    </script>
</head>
<body>

</body>
</html>